<template>
  <div
    class="category-tabs sa-flex"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <div
      class="list sa-flex"
      :id="listId"
      :style="{
        height: compData.data.height + 'px',
        '--activeStyle-color': compData.data.activeStyle.color,
        '--activeStyle-size': compData.data.activeStyle.size + 'px',
        '--inactiveStyle-color': compData.data.inactiveStyle.color,
        '--inactiveStyle-size': compData.data.inactiveStyle.size + 'px',
      }"
    >
      <div
        class="list-item"
        v-for="item in compData.data.list"
        :key="item.id"
        @click="tapCategory(item, $event)"
      >
        <div :class="['list-text', { active: activeID == item.id }]">{{ item.name }}</div>
      </div>
      <div
        class="list-line"
        :style="{ left: lineLeft + 'px', background: compData.data.line.color }"
      ></div>
    </div>
	<div class="righticon sa-p-l-6 sa-p-r-6">
		<el-icon :color="compData.data.activeStyle.color"><Expand /></el-icon>
	</div>
  </div>
</template>

<script setup>
  import { tap } from 'lodash';
  import { ref, reactive, computed, watch, nextTick } from 'vue';
  import { buildShortUUID } from '@/sheep/utils';
  const props = defineProps(['compData']);
  const listId = ref(buildShortUUID('list'));
  const lineLeft = ref(0);
  const activeID = ref(null);
  watch(
    () => props.compData.data.list,
    (newList) => {
      if (newList.length) {
        nextTick(() => {
          activeID.value = newList[0].id;
          const parent = document.querySelector(`#${listId.value}`); // 指定父元素
          const firstChild = parent.firstElementChild;
          computedLeft(firstChild, parent);
        });
      }
    },
  );

  function tapCategory(item, event) {
    activeID.value = item.id;
    const parent = document.querySelector(`#${listId.value}`); // 指定父元素
    const target = event.target;
    computedLeft(target, parent);
  }
  function computedLeft(target, parent) {
    const targetRect = target.getBoundingClientRect();
    const parentRect = parent.getBoundingClientRect();
    const scrollLeft = parent.scrollLeft;
    const offsetLeft = targetRect.left - parentRect.left + scrollLeft;
    lineLeft.value = offsetLeft + target.offsetWidth / 2 - 16 / 2;
  }
</script>

<style lang="scss" scoped>
  .category-tabs {
    overflow: hidden;

    .list {
      width: 100%;
      overflow-y: hidden;
      overflow-x: scroll;
      position: relative;

      &::-webkit-scrollbar {
        display: none;
      }

      .list-item {
        min-width: 64px;
        width: 64px;
        margin: 0 8px;

        .list-text {
          width: 100%;
          text-align: center;
          height: 20px;
          line-height: 20px;
          color: var(--inactiveStyle-color);
          font-size: var(--inactiveStyle-size);
        }

        .active {
          color: var(--activeStyle-color);
          font-size: var(--activeStyle-size);
        }
      }

      .list-line {
        transition: 0.3s;
        width: 16px;
        height: 3px;
        border-radius: 5px;
        position: absolute;
        bottom: 2px;
      }
    }
  }
</style>
